<template>

    <div>


        <div class="dashboard-container">
            <div class="dashboard-card fade-in" style="animation-delay: 0.1s">
                <div class="card-header">
                    <div class="card-title">CPU 使用率</div>
                    <i class="fas fa-microchip card-icon"></i>
                </div>
                <div class="gauge-chart" id="cpu-chart"></div>
                <div class="resource-value">87.3%</div>
                <div class="resource-label">当前使用率</div>
            </div>

            <div class="dashboard-card fade-in" style="animation-delay: 0.2s">
                <div class="card-header">
                    <div class="card-title">内存使用率</div>
                    <i class="fas fa-memory card-icon"></i>
                </div>
                <div class="gauge-chart" id="memory-chart"></div>
                <div class="resource-value">64.2%</div>
                <div class="resource-label">当前使用率</div>
            </div>

            <div class="dashboard-card fade-in" style="animation-delay: 0.3s">
                <div class="card-header">
                    <div class="card-title">磁盘使用率</div>
                    <i class="fas fa-hdd card-icon"></i>
                </div>
                <div class="gauge-chart" id="disk-chart"></div>
                <div class="resource-value">52.8%</div>
                <div class="resource-label">当前使用率</div>
            </div>

            <div class="dashboard-card fade-in" style="animation-delay: 0.4s">
                <div class="card-header">
                    <div class="card-title">网络带宽</div>
                    <i class="fas fa-network-wired card-icon"></i>
                </div>
                <div class="gauge-chart" id="network-chart"></div>
                <div class="resource-value">42.5%</div>
                <div class="resource-label">当前使用率</div>
            </div>
        </div>

        <div class="main-content">
            <div class="large-card fade-in" style="animation-delay: 0.5s">
                <h2 class="section-title">资源监控</h2>
                <div class="chart-container">
                    <div class="network-chart" id="network-traffic-chart"></div>
                </div>
            </div>

            <div class="operations">
                <div class="op-card fade-in" style="animation-delay: 0.6s">
                    <h2 class="section-title">责任人信息</h2>
                    <div class="responsible-info">
                        <div class="avatar">ZW</div>
                        <div class="contact-info">
                            <h3>张伟</h3>
                            <p><i class="fas fa-envelope contact-icon"></i> zhangwei@techsys.com</p>
                            <p><i class="fas fa-phone contact-icon"></i> +86 138 8888 8888</p>
                        </div>
                    </div>
                    <div class="action-buttons">
                        <button class="action-btn backup">
                            <i class="fas fa-database"></i> 数据备份
                        </button>
                        <button class="action-btn restore">
                            <i class="fas fa-redo"></i> 系统还原
                        </button>
                    </div>
                </div>

                <div class="op-card fade-in pulse" style="animation-delay: 0.7s">
                    <h2 class="section-title">告警通知</h2>
                    <div class="alert-box">
                        <div class="alert-header">
                            <i class="fas fa-exclamation-triangle alert-icon"></i>
                            <h3>CPU 使用率告警</h3>
                        </div>
                        <div class="alert-content">
                            <p>当前CPU使用率已超过85%的设定阈值，请检查系统负载情况。</p>
                            <p>告警时间: 2023-10-15 14:25:36</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="chart-container fade-in" style="animation-delay: 0.8s">
                <h2 class="section-title">磁盘空间分布</h2>
                <div class="disk-chart" id="disk-usage-chart"></div>
            </div>

            <div class="large-card fade-in" style="animation-delay: 0.9s">
                <h2 class="section-title">阈值设置</h2>
                <div class="threshold-controls">
                    <div class="threshold-item">
                        <div class="threshold-title">
                            <i class="fas fa-microchip threshold-icon"></i>
                            <span>CPU 使用阈值</span>
                        </div>
                        <div class="threshold-value">85%</div>
                        <el-slider v-model="cpuThreshold" :min="60" :max="95"></el-slider>
                    </div>

                    <div class="threshold-item">
                        <div class="threshold-title">
                            <i class="fas fa-memory threshold-icon"></i>
                            <span>内存使用阈值</span>
                        </div>
                        <div class="threshold-value">80%</div>
                        <el-slider v-model="memoryThreshold" :min="60" :max="95"></el-slider>
                    </div>

                    <div class="threshold-item">
                        <div class="threshold-title">
                            <i class="fas fa-hdd threshold-icon"></i>
                            <span>磁盘使用阈值</span>
                        </div>
                        <div class="threshold-value">75%</div>
                        <el-slider v-model="diskThreshold" :min="60" :max="95"></el-slider>
                    </div>

                    <div class="threshold-item">
                        <div class="threshold-title">
                            <i class="fas fa-network-wired threshold-icon"></i>
                            <span>网络带宽阈值</span>
                        </div>
                        <div class="threshold-value">70%</div>
                        <el-slider v-model="networkThreshold" :min="50" :max="90"></el-slider>
                    </div>
                </div>
                <button class="action-btn" style="margin-top: 20px; width: 100%">
                    <i class="fas fa-save"></i> 保存阈值设置
                </button>
            </div>
        </div>
    </div>

</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'ServerPerformance',
    data() {
        return {
            cpuThreshold: 85,
            memoryThreshold: 80,
            diskThreshold: 75,
            networkThreshold: 70,
            // 图表实例
            cpuchart: null,
            memorychart: null,
            diskchart: null,
            networkchart: null,
            networkTrafficChart: null
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initCharts();

            // 模拟实时数据更新
            this.updateInterval = setInterval(() => {
                this.updateCharts();
            }, 3000);
        });
    },
    beforeUnmount() {
        // 清除定时器
        if (this.updateInterval) {
            clearInterval(this.updateInterval);
        }

        // 销毁图表实例
        if (this.cpuchart) {
            this.cpuchart.dispose();
        }
        if (this.memorychart) {
            this.memorychart.dispose();
        }
        if (this.diskchart) {
            this.diskchart.dispose();
        }
        if (this.networkchart) {
            this.networkchart.dispose();
        }
        if (this.networkTrafficChart) {
            this.networkTrafficChart.dispose();
        }
    },
    methods: {
        initCharts() {
            // 初始化仪表盘图表
            this.initGaugeChart('cpu-chart', 87.3, '#4facfe');
            this.initGaugeChart('memory-chart', 64.2, '#00f2fe');
            this.initGaugeChart('disk-chart', 52.8, '#ff6b6b');
            this.initGaugeChart('network-chart', 42.5, '#6a11cb');

            // 初始化网络流量图
            this.initNetworkChart();

            // 初始化磁盘使用图
            this.initDiskUsageChart();
        },

        initGaugeChart(domId, value, color) {
            const chart = echarts.init(document.getElementById(domId));
            const option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        min: 0,
                        max: 100,
                        splitNumber: 5,
                        radius: '90%',
                        axisLine: {
                            lineStyle: {
                                width: 12,
                                color: [
                                    [0.3, '#67e0e3'],
                                    [0.7, '#37a2da'],
                                    [1, '#fd666d']
                                ]
                            }
                        },
                        pointer: {
                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                            length: '12%',
                            width: 10,
                            offsetCenter: [0, '-60%'],
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            length: 12,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        splitLine: {
                            length: 20,
                            lineStyle: {
                                color: 'auto',
                                width: 3
                            }
                        },
                        axisLabel: {
                            color: '#8eb4d9',
                            fontSize: 12,
                            distance: -30,
                            formatter: function (value) {
                                if (value === 0 || value === 100) {
                                    return value;
                                }
                                return '';
                            }
                        },
                        title: {
                            offsetCenter: [0, '-20%'],
                            fontSize: 14,
                            color: '#8eb4d9'
                        },
                        detail: {
                            fontSize: 24,
                            offsetCenter: [0, '0%'],
                            valueAnimation: true,
                            formatter: function (value) {
                                return Math.round(value) + '%';
                            },
                            color: 'auto'
                        },
                        data: [
                            {
                                value: value,
                                name: '使用率'
                            }
                        ]
                    }
                ]
            };
            chart.setOption(option);

            // 保存图表实例以便更新
            this[domId.replace('-', '')] = chart;
        },

        initNetworkChart() {
            const chart = echarts.init(document.getElementById('network-traffic-chart'));
            const base = +new Date(2023, 9, 15);
            const oneDay = 24 * 3600 * 1000;
            const data = [[base, Math.random() * 300]];

            for (let i = 1; i < 100; i++) {
                const now = new Date(base + i * oneDay / 10);
                data.push([
                    +now,
                    Math.round((Math.random() - 0.5) * 100 + data[i - 1][1])
                ]);
            }

            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(16, 36, 70, 0.9)',
                    borderColor: 'rgba(64, 158, 255, 0.5)',
                    textStyle: {
                        color: '#e0f7ff'
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                grid: {
                    top: '10%',
                    left: '3%',
                    right: '4%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: {
                    type: 'time',
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: '#8eb4d9'
                        }
                    },
                    axisLabel: {
                        color: '#8eb4d9'
                    }
                },
                yAxis: {
                    type: 'value',
                    name: 'Mbps',
                    nameTextStyle: {
                        color: '#8eb4d9'
                    },
                    boundaryGap: [0, '100%'],
                    axisLine: {
                        lineStyle: {
                            color: '#8eb4d9'
                        }
                    },
                    axisLabel: {
                        color: '#8eb4d9'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(64, 158, 255, 0.1)'
                        }
                    }
                },
                series: [
                    {
                        name: '上传流量',
                        type: 'line',
                        showSymbol: false,
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#4facfe' },
                                { offset: 1, color: '#00f2fe' }
                            ])
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(79, 172, 254, 0.5)' },
                                { offset: 1, color: 'rgba(0, 242, 254, 0.1)' }
                            ])
                        },
                        data: data
                    },
                    {
                        name: '下载流量',
                        type: 'line',
                        showSymbol: false,
                        smooth: true,
                        lineStyle: {
                            width: 3,
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#ff9a9e' },
                                { offset: 1, color: '#fad0c4' }
                            ])
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(255, 154, 158, 0.5)' },
                                { offset: 1, color: 'rgba(250, 208, 196, 0.1)' }
                            ])
                        },
                        data: data.map(item => [item[0], item[1] - 50 - Math.random() * 50])
                    }
                ]
            };
            chart.setOption(option);
            this.networkTrafficChart = chart;
        },

        initDiskUsageChart() {
            const chart = echarts.init(document.getElementById('disk-usage-chart'));
            const option = {
                tooltip: {
                    trigger: 'item',
                    backgroundColor: 'rgba(16, 36, 70, 0.9)',
                    borderColor: 'rgba(64, 158, 255, 0.5)',
                    textStyle: {
                        color: '#e0f7ff'
                    }
                },
                legend: {
                    bottom: '5%',
                    left: 'center',
                    textStyle: {
                        color: '#8eb4d9'
                    }
                },
                series: [
                    {
                        name: '磁盘使用',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#0f1c3f',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold',
                                color: '#00f2fe'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 320, name: '系统文件', itemStyle: { color: '#4facfe' } },
                            { value: 240, name: '应用程序', itemStyle: { color: '#00f2fe' } },
                            { value: 149, name: '用户数据', itemStyle: { color: '#ff6b6b' } },
                            { value: 100, name: '备份文件', itemStyle: { color: '#6a11cb' } },
                            { value: 59, name: '其他', itemStyle: { color: '#37a2da' } }
                        ]
                    }
                ]
            };
            chart.setOption(option);
        },

        updateCharts() {
            // 模拟实时数据变化
            const cpuValue = Math.min(100, Math.max(0, this.cpuchart.getOption().series[0].data[0].value + (Math.random() - 0.5) * 5));
            const memoryValue = Math.min(100, Math.max(0, this.memorychart.getOption().series[0].data[0].value + (Math.random() - 0.4) * 4));
            const diskValue = Math.min(100, Math.max(0, this.diskchart.getOption().series[0].data[0].value + (Math.random() - 0.3) * 3));
            const networkValue = Math.min(100, Math.max(0, this.networkchart.getOption().series[0].data[0].value + (Math.random() - 0.5) * 6));

            // 更新仪表盘数据
            this.updateGaugeChart('cpuchart', cpuValue);
            this.updateGaugeChart('memorychart', memoryValue);
            this.updateGaugeChart('diskchart', diskValue);
            this.updateGaugeChart('networkchart', networkValue);

            // 更新网络流量图
            this.updateNetworkChart();
        },

        updateGaugeChart(chartName, value) {
            const chart = this[chartName];
            const option = chart.getOption();
            option.series[0].data[0].value = value;
            chart.setOption(option);

            // 更新显示的值
            document.querySelector(`#${chartName.replace('chart', '-chart')} + .resource-value`).textContent = value.toFixed(1) + '%';
        },

        updateNetworkChart() {
            const chart = this.networkTrafficChart;
            const option = chart.getOption();
            const data = option.series[0].data;
            const base = data[data.length - 1][0];
            const oneDay = 24 * 3600 * 1000;

            // 移除第一个数据点
            data.shift();

            // 添加新的数据点
            for (let i = 0; i < 2; i++) {
                const now = new Date(base + (i + 1) * oneDay / 10);
                const lastValue = data[data.length - 1][1];
                const newValue = Math.round((Math.random() - 0.5) * 20 + lastValue);
                data.push([
                    +now,
                    newValue
                ]);
            }

            // 更新下载流量数据
            const downloadData = option.series[1].data;
            downloadData.shift();
            for (let i = 0; i < 2; i++) {
                const now = data[data.length - 2 + i][0];
                const newValue = data[data.length - 2 + i][1] - 50 - Math.random() * 50;
                downloadData.push([now, newValue]);
            }

            chart.setOption(option);
        }
    }
}

</script>
<style scoped>
/* 所有样式保持不变 */
.server-performance-container {
    position: relative;
    padding: 20px;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f1c3f, #1a1a2e);
    color: #e0f7ff;
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

body {
    background: linear-gradient(135deg, #0f1c3f, #1a1a2e);
    min-height: 100vh;
    color: #e0f7ff;
    overflow-x: hidden;
    padding: 20px;
}

#app {
    max-width: 1800px;
    margin: 0 auto;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(64, 158, 255, 0.3);
    margin-bottom: 30px;
    position: relative;
}

.dashboard-title {
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
    position: relative;
}

.dashboard-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    border-radius: 2px;
}

.system-info {
    display: flex;
    gap: 15px;
}

.info-item {
    background: rgba(16, 36, 70, 0.7);
    border: 1px solid rgba(64, 158, 255, 0.2);
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.info-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 242, 254, 0.2);
    border-color: rgba(0, 242, 254, 0.4);
}

.info-icon {
    font-size: 20px;
    color: #4facfe;
}

.dashboard-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.dashboard-card {
    background: rgba(16, 36, 70, 0.7);
    border: 1px solid rgba(64, 158, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.dashboard-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 242, 254, 0.25);
    border-color: rgba(0, 242, 254, 0.4);
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #4facfe;
}

.card-icon {
    font-size: 28px;
    color: #00f2fe;
}

.gauge-chart {
    height: 180px;
    width: 100%;
}

.resource-value {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-top: 10px;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.resource-label {
    text-align: center;
    color: #8eb4d9;
    font-size: 14px;
    margin-top: 5px;
}

.main-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.large-card {
    background: rgba(16, 36, 70, 0.7);
    border: 1px solid rgba(64, 158, 255, 0.2);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.large-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 242, 254, 0.25);
}

.section-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #4facfe;
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
    border-radius: 2px;
}

.threshold-controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.threshold-item {
    background: rgba(26, 53, 96, 0.6);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(64, 158, 255, 0.15);
    transition: all 0.3s ease;
}

.threshold-item:hover {
    border-color: rgba(0, 242, 254, 0.4);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.threshold-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #00f2fe;
}

.threshold-icon {
    font-size: 20px;
}

.threshold-value {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin: 15px 0;
    color: #4facfe;
}

.operations {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.op-card {
    background: rgba(26, 53, 96, 0.6);
    border-radius: 10px;
    padding: 25px;
    border: 1px solid rgba(64, 158, 255, 0.15);
    transition: all 0.3s ease;
}

.op-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 242, 254, 0.4);
}

.responsible-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #0f1c3f;
}

.contact-info {
    flex: 1;
}

.contact-info h3 {
    font-size: 20px;
    margin-bottom: 5px;
    color: #00f2fe;
}

.contact-info p {
    color: #8eb4d9;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-icon {
    color: #4facfe;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.action-btn {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    border: none;
    border-radius: 8px;
    padding: 15px;
    color: #0f1c3f;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 242, 254, 0.4);
}

.action-btn.backup {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.action-btn.restore {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}

.alert-box {
    background: rgba(206, 32, 32, 0.15);
    border: 1px solid rgba(255, 82, 82, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.alert-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #ff5252;
}

.alert-icon {
    font-size: 24px;
}

.alert-content {
    color: #ffa1a1;
    line-height: 1.6;
}

.footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.network-chart {
    height: 300px;
    width: 100%;
}

.disk-chart {
    height: 300px;
    width: 100%;
}

.chart-container {
    background: rgba(16, 36, 70, 0.7);
    border: 1px solid rgba(64, 158, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #4facfe, #00f2fe);
}

.grid-line {
    position: absolute;
    background: rgba(64, 158, 255, 0.1);
}

.grid-line.vertical {
    width: 1px;
    height: 100%;
    top: 0;
}

.grid-line.horizontal {
    height: 1px;
    width: 100%;
    left: 0;
}

.glow-effect {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(rgba(0, 242, 254, 0.3), transparent 70%);
    filter: blur(30px);
    z-index: -1;
}

.glow-1 {
    top: 10%;
    left: 10%;
}

.glow-2 {
    bottom: 10%;
    right: 10%;
}

.fade-in {
    animation: fadeIn 0.8s ease forwards;
}

.slide-up {
    animation: slideUp 0.6s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.4);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(0, 242, 254, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 242, 254, 0);
    }
}

@media (max-width: 1200px) {
    .dashboard-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .main-content {
        grid-template-columns: 1fr;
    }

    .footer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        grid-template-columns: 1fr;
    }

    .system-info {
        flex-direction: column;
    }

    .threshold-controls {
        grid-template-columns: 1fr;
    }
}
</style>